Skip to content

Add UI element masking example#8923

Merged
mvaligursky merged 1 commit into
mainfrom
mv-ui-masking-example
Jun 18, 2026
Merged

Add UI element masking example#8923
mvaligursky merged 1 commit into
mainfrom
mv-ui-masking-example

Conversation

@mvaligursky

Copy link
Copy Markdown
Contributor

Adds an engine-only example demonstrating UI masking with the element system, addressing the gap noted in #2799 (the original masking examples were removed in #2797).

Examples:

  • New user-interface/masking example with two demos on a screen-space UI:
    • Rectangular mask — a row of square tiles scrolls horizontally behind a rectangular mask element and is clipped to its bounds.
    • Alpha-shaped mask — content is clipped to the opaque pixels of a heart texture (the mask material's alpha test drives the shape), with the heart "beating" via animated size.
  • Mask toggle (default on) to compare clipped vs unclipped content, plus an Animate toggle to pause motion.
  • Reuses existing assets (colors.webp, heart.png) and includes generated thumbnails.

Closes #2799.

@github-actions

Copy link
Copy Markdown

Build size report

This PR does not change the size of the minified bundles.

Bundle Minified Gzip Brotli
playcanvas.min.js 2284.4 KB — 585.4 KB — 455.7 KB —
playcanvas.min.mjs 2281.8 KB — 584.4 KB — 454.9 KB —

@mvaligursky mvaligursky merged commit 11e3f14 into main Jun 18, 2026
10 checks passed
@mvaligursky mvaligursky deleted the mv-ui-masking-example branch June 18, 2026 13:24
@willeastcott

Copy link
Copy Markdown
Contributor

This looks like a test rather than an example. Can we try to make new examples look a bit more relatable to engine users that are trying to achieve specific features/effects in their apps?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add an example showing UI masking

2 participants